<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <TreeTools
          :node-data="company"
          :is-root="true"
          @addDepart="addDepart"
        />
        <!-- 用了一个行列布局 -->
        <hr>
        <el-tree
          :data=" departs"
          :default-expand-all="true"
        >
          <template #default="{data}">

            <TreeTools
              :node-data="data"
              :is-root="false"
              @delDepart="getDepartments"
              @addDepart="addDepart"
              @editDepart="editDepart"
            />

          </template>
        </el-tree>
      </el-card>
      <AddDept ref="addDept" :show-dialog.sync="showDialog" :node-data="nodeData" @addDepartments="getDepartments" />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import AddDept from '../departments/components/add-dept'
import { listToTreeData } from '@/utils/index'
export default {

  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      showDialog: false,
      nodeData: {},
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: []
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    addDepart(nodeData) {
      this.nodeData = nodeData
      this.showDialog = true
    },
    async  getDepartments() {
      const { depts } = await getDepartments()
      // console.log(depts)
      this.departs = listToTreeData(depts, '')
      // console.log(this.departs)
    },

    async editDepart(nodeData) {
      // 只有树形点击弹窗的这一刻才知道是编辑,而且才知道编辑谁
      // 这是父组件,回显的函数要放在子组件
      await this.$refs.addDept.getDepartmentsDetail(nodeData.id)
      this.nodeData = nodeData
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
